<template>
	<view sticky top-0 z-100  bg-white>
		<view @click="go('search',`tabIndex=${current? 2 : 3}`)">
			<uni-search-bar radius="5" placeholder="请输入搜索关键词" ref="searchBar" cancelButton="none" readonly />
		</view>
		<view class="pb-10px px-10px mb1px">
			<uni-segmented-control :current="current" :values="tabs" active-color="#0041a5" @clickItem="onTabsClick" />
		</view>
		<view class="overflow-auto" mb-5px>
			<uni-segmented-control :current="typesIndex" :values="typeTabs" style-type="text" active-color="#0041a5" @clickItem="onTypesTabsClick" />
		</view>
	</view>
	
	<view class="page page-demand">
		<view class="block-item p-10px mb10px" 
		v-if="list.length"
		v-for="i in list" :key="current? i.supply_id : i.askbuy_id" 
		@click="goDetail(current? i.supply_id : i.askbuy_id)"
		>
			<view flex items-baseline pb-10px>
				<view v-for="v in i.tags" mr-6px>
					<uni-tag :text="v" type="error" size="mini" />
				</view>
				<view class="flex-1 font-600 text-lg mt-4px ml-5px">{{i.description}}</view>
			</view>
			<view flex items-center pt-5px pb5px v-if="i.category_name">
				<view class="icon icon-type"></view>
				<view text-sm ml-10px mt--2px>类型： {{i.category_name}}</view>
			</view>
			<view flex items-center pt-5px pb5px>
				<view class="icon icon-name"></view>
				<view text-sm ml-10px mt--2px>名称： {{i.name}}</view>
			</view>
			<view flex items-center pt-5px pb5px>
				<view class="icon icon-num"></view>
				<view text-sm ml-10px mt--2px>数量： {{i.number}}</view>
			</view>
			<view flex items-center pt-5px pb5px>
				<view class="icon icon-price"></view>
				<view text-sm ml-10px mt--2px>价格： {{i.price_name}}</view>
			</view>
			<view flex pt-5px pb5px>
				<view class="icon icon-region"></view>
				<view text-sm ml-10px mt--2px flex> 
					<view>地区：</view>
					<view flex-1> 
						<text mr-10px mb-10px v-for="v in Object.values(i.region_name)">{{ v }}</text>
					</view>
				</view>
				
			</view>
			<view flex items-center pt-5px pb5px v-if="!current">
				<view class="icon icon-time"></view>
				<view text-sm ml-10px mt--2px>时效： {{i.ageing_name}}</view>
			</view>
			<view class="overflow-auto whitespace-nowrap pt-5px pb10px" v-if="i.images?.length">
				<image class="image" v-for="img in i.images" :key="img" :src="img" lazy-load mode="aspectFill" />
			</view>
			<view flex items-center pt-5px pb5px justify-between>
				<view flex items-center>
					<view v-if="current" class="w-80 h-80 relative flex items-center">
						<image v-if="i.firm?.logo" w-full h-full :src="i.firm?.logo" rounded-full />
						<view v-else class="icon icon-enterprise-logo"></view>
						<span v-if="i.member && i.member.level !== 'free'"
							:class="`icon icon-vip absolute bottom-0 right--16 text-32 color-${i.member.level}`">
						</span>
					</view>
					<view v-else class="circle1 text-xs bg-blue-4 relative">
						求购方
						<span v-if="i.member && i.member.level !== 'free'"
							:class="`icon icon-vip absolute bottom-0 right--18 text-32 color-${i.member.level}`">
						</span>
					</view>
					<view ml-4>
						<view text-sm v-if="current">{{i.firm?.firm_name}}</view>
						<view text-sm v-else>求购方</view>
						<view text-xs mt5px color-bluegray>{{i.updated_at}}</view>
					</view>
				</view>
				
				<view 
					class="contact bg-blue-1" 
					v-if="(current && i.firm?.contact_phone) || i.member?.mobile" 
					@click.stop="phoneCall(current? i.firm?.contact_phone : i.member?.mobile, current? i.supply_id : i.askbuy_id)"
				>
					<view class="icon icon-tel"></view>
					<view pl-2px>联系</view>
				</view>
			</view>
		</view>

		<view v-else-if="!loading" flex items-center justify-center flex-col pt-100px color-gray>
			<view class="icon icon-nodata text-8xl"></view>
			<view pt-10px>暂无数据</view>
		</view>

		<view class="fab" @click="publish">发布</view>
	</view>
	<contact :phone="requirePhone" :id="require_id" v-model:show="showContactModel" />
	<tabbar index="1" />

</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'
	import { makePhoneCall } from '@/common/utils'
	import { useUserStore } from '@/stores/user'
	const user = useUserStore()
	import { onShow } from "@dcloudio/uni-app"

	let globalData, querys
	onShow(() => {
		globalData = getApp().globalData
		querys = globalData.tabarQuery
		globalData.tabarQuery = null
		current.value = querys?.type == 'supply'? 1:0
		fn()
  })

	
	const current = ref(querys?.type == 'supply'? 1:0)
	const tabs = ['求购','供应']
	const onTabsClick = ({currentIndex}) => {
		if (current.value == currentIndex) return
		current.value = currentIndex
		page_no.value = 1
		loadedAll.value = false
		list.value = []
		getList()
	}

	const publish = () => {
		//先查询当前用户是否认证，没认证先走认证

		if(!user.mobile && !current.value) {
			uni.showToast({
				icon: 'none',
				title: '请先登录'
			})
			return
		}
		if(!user.userInfo.type && current.value) {
			uni.showToast({
				icon: 'none',
				title: '请先申请企业或员工认证'
			})
			return
		}
		uni.navigateTo({
			url: `/pages/publish/index?type=${current.value}`
		})
	}

	const page_no = ref(1) 
	const page_size = ref(100) 
	const loading = ref(false)
	const loadedAll = ref(false)
	const list = ref([])

	let types = []
	const typeTabs = ref([])
	const typesIndex = ref(0)

	const onTypesTabsClick = ({currentIndex}) => {
		if (typesIndex.value == currentIndex) return
		typesIndex.value = currentIndex
		page_no.value = 1
		loadedAll.value = false
		list.value = []
		getList()
	}

	async function fn(){
		const typeRes = await api.goodsCatList({parent_id: 0})
		types = [{ name: '全部', id: 0 }, ...typeRes ]
		typeTabs.value = types.map(i => i.name)
		getList()
	}

	async function getList() {
		if(loadedAll.value) return
		loading.value = true
		const data = await api[current.value? 'getSupplyList':'getRequireList']({
				page_size: page_size.value,
				page_no: page_no.value,
				keyword: querys?.keyword,
				category: types[typesIndex.value].id
			})
		if(data.list.length < page_size.value) {
			loadedAll.value = true
		}
		page_no.value += 1
		list.value = [ ...list.value, ...data.list]
		loading.value = false
	}

	const showContactModel = ref(false)
	const requirePhone = ref('')
	const require_id = ref('')
	const phoneCall = (phone,id) => {
		if(current.value) {
			makePhoneCall({
				phone,
				source: 'supply',
				id
			})
			return
		}
		requirePhone.value = phone
		require_id.value = id
		showContactModel.value = true
	}

	const goDetail = id => {
		console.log('---id---',id);
		uni.navigateTo({
			url: `/pages/demand/detail?id=${id}&type=${current.value? 'supply':'require'}`
		})
	}

</script>

<style lang="scss">
.page-demand {
	background-color: $uni-bg-color-hover;

	.block-item {
		background-color: white;
		.icon {
			color: gray;
		}

		.icon-enterprise-logo {
			font-size: 80upx;
			color: $uni-color-navigator;
		}
		
		.image {
			width: 240upx;
			height: auto;
			aspect-ratio: 3/4;
			margin-right: 10px;
		}

		.circle1 {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.contact {
			display: flex;
			align-items: center;
			color: $uni-color-blue;
			border-radius: 100px;
			padding: 4px 10px;

			.icon {
				color: $uni-color-blue;
				margin-top: 2px;
				margin-right: 2px;
			}
		}
	}

	.fab {
		position: fixed;
		right: 10px;
		bottom: 100px;
		width: 60px;
		height: 60px;
		font-size: 16px;
		background-color: $uni-color-blue;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100%;
	}
}

</style>

